<template>
  <div class="map">
    <h4>高德地图</h4>
    <div class="el-icon-s-promotion" v-for="(item,index) in address" :key="index">定位{{item.name}}</div>
    <button @click="map">{{mapInfomation}}</button>
    <div class="mapComponent">
      <Map
        :isShow="isShow"
        :placeholderText="placeholderText"
        :buttonShow="buttonShow"
        :showbtn="showbtn"
      />
    </div>
  </div>
</template>
<script>
import Map from "./../components/mapComponents//mapComponents.vue";
export default {
  name: "GDMap",
  components: {
    Map,
  },
  data() {
    return {
      maps: {},
      BrShow: true,
      mapNumber: "我是会展示出来的啦！",
      inputText: "text",
      placeholderText: "请输入需要查询的地址",
      buttonShow: "展示",
      isShow: true,
    };
  },
  computed: {
    address() {
      return this.$store.state.addres;
    },
    mapInfomation() {
      return this.$store.getters.map;
    },
  },
  methods: {
    showbtn() {
      // console.log(11);
      this.isShow = !this.isShow;
    },
    map() {
      AMap.plugin("AMap.Geolocation", function () {
        var geolocation = new AMap.Geolocation({
          // 是否使用高精度定位，默认：true
          enableHighAccuracy: true,
          // 设置定位超时时间，默认：无穷大
          timeout: 10000,
        });
        geolocation.getCurrentPosition();
        AMap.event.addListener(geolocation, "complete", onComplete);
        AMap.event.addListener(geolocation, "error", onError);

        function onComplete(result) {
          const self = this;
          // data是具体的定位信息
          //   console.log(result);
          //   要逆地理编码
          AMap.plugin("AMap.Geocoder", function () {
            var geocoder = new AMap.Geocoder({
              // city 指定进行编码查询的城市，支持传入城市名、adcode 和 citycode
              city: result.citycode,
            });
            var lnglat = [111.346574, 22.002706];
            // var lnglat = result.rectangle.split(";")[0].split(",");
            geocoder.getAddress(lnglat, function (status, result) {
              if (status === "complete" && result.info === "OK") {
                // result为对应的地理位置详细信息
                console.log(result);
                self.$store.dispatch("address", result);
              }
              self.maps = result;
            });
          });
        }

        function onError(data) {
          // 定位出错
          console.log(data);
        }
      });
    },
  },
};
</script>
<style lang="less" scoped>
</style>